<template>
  <div class="detail-wrapper">
    <el-page-header @back="goBack" content="订单记录"> </el-page-header>
    <!-- <el-divider></el-divider> -->
    <div class="topBox paddingBorder">
      <el-descriptions
        class="margin-top"
        :title="dataForm.name"
        :column="3"
        :labelStyle="labelStyle"
        :contentStyle="contentStyle"
        border
      >
        <template slot="extra">
          <el-button type="primary" size="small" @click="toEdit"
            >编辑</el-button
          >
          <el-button type="primary" size="small" @click="handleDelete"
            >删除</el-button
          >
        </template>
        <el-descriptions-item>
          <template slot="label"> 创建人 </template>
          {{ dataForm.add_user_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建时间 </template>
          {{ dataForm.add_time }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 最后修改人 </template>
          {{ dataForm.operator_user }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 修改时间 </template>
          {{ dataForm.operator_time }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="top36 prodBox paddingBorder">
      <div class="titleLabel">订单信息</div>
      <el-descriptions
        class="margin-top top36"
        title="基本信息"
        :column="3"
        :labelStyle="labelStyle"
        :contentStyle="contentStyle"
        border
      >
        <el-descriptions-item>
          <template slot="label"> 订单编号 </template>
          {{ dataForm.order_serial }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单名称 </template>
          {{ dataForm.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售日期 </template>
          {{ dataForm.sale_date }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户名称 </template>
          {{ dataForm.customer_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系方式 </template>
          {{ dataForm.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 结算方式 </template>
          <!-- {{ dataForm.pay_type }} -->
          {{ $getDictLabel('pay_type', String(dataForm.pay_type)) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户经理 </template>
          {{ dataForm.customer_manager }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 交货地址 </template>
          {{ dataForm.address }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 备注 </template>
          {{ dataForm.remarks }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="descMockBox">
        <div class="descMockLabel">产品明细</div>
        <el-table
          :data="dataForm.order_sub"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column
            type="index"
            label="序号"
            header-align="center"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="product_name"
            label="产品"
            header-align="center"
            align="center"
            width="360"
          >
            <template slot-scope="scope">
              <div class="disCenter itemBox">
                <div class="imgBox">
                  <img :src="scope.row.product_master_pic" />
                </div>
                <div class="rightBox">
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="scope.row.product_name"
                    placement="top"
                  >
                    <span class="top overTwoHidden">{{
                      scope.row.product_name
                    }}</span>
                  </el-tooltip>

                  <span class="bottom"
                    >产品编号: {{ scope.row.product_serial }}</span
                  >
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sku_name"
            label="规格"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sale_price"
            label="单价（元）"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sale_num"
            label="销售数量"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="total_price"
            label="合计金额（元）"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="surplus_production_total"
            label="计划生产数量"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="delivery_date"
            label="交付日期"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import { addDynamicRoute } from '@/router'
import { getOrderDetail, deleteOrder } from '@/api'
export default {
  data() {
    return {
      dataForm: {
        name: '',
        versions: '',
      },
      labelStyle: {
        width: '150px',
      },
      contentStyle: {
        width: '28vw',
      },
    }
  },
  computed: {},
  activated() {
    const id = this.$route.params.id
    this.dataForm.id = id
    if (id) this.fetchDetail(id)
  },
  methods: {
    async handleDelete() {
      this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteOrder({ id: this.dataForm.id })
          if (res?.status === 1) {
            this.$message.success(res?.msg || '')
            this.$router.go(-1)
          }
        })
        .catch(() => {})
    },
    async fetchDetail(id) {
      const params = {
        id,
      }
      const res = await getOrderDetail(params)
      console.log(res)
      if (res?.status === 1) {
        const data = res?.data || {}
        this.dataForm = data
        console.log(data)
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    toEdit() {
      const routeParams = {
        routeName: `sale-order__add`,
        title: `销售订单 - 编辑`,
        path: 'sale/order-add',
        params: {
          id: this.dataForm.id || '',
        },
      }
      addDynamicRoute(routeParams, this.$router)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail-wrapper {
  background: #fff;
  padding: 20px;
  ::v-deep .el-page-header__title,
  .el-page-header__content {
    font-size: 12px;
  }

  ::v-deep .el-page-header__content {
    font-size: 12px;
  }

  // ::v-deep .el-descriptions__title {
  //   position: relative;
  //   padding-left: 16px;
  //   &::before {
  //     background: $mainColor;
  //     content: '';
  //     display: inline-block;
  //     height: 19px;
  //     left: 0;
  //     position: absolute;
  //     top: calc(50% - 10px);
  //     width: 3px;
  //   }
  // }

  .topBox {
    margin-top: 36px;
    ::v-deep .el-descriptions__title {
      font-size: 20px;
      font-weight: 600;
      position: relative;
      padding-left: 16px;
      color: #303133;
      &::before {
        background: $mainColor;
        content: '';
        display: inline-block;
        height: 20px;
        left: 0;
        position: absolute;
        top: calc(50% - 10px);
        width: 3px;
      }
    }
  }

  .prodBox {
    .prodImgBox {
      .imgItem {
        width: 64px;
        height: 64px;
        margin-left: 12px;
        cursor: pointer;
        &:first-child {
          margin-left: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .itemBox {
    .imgBox {
      width: 64px;
      height: 64px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rightBox {
      margin-left: 14px;
      text-align: left;
      .top {
        max-width: 200px;
        margin-bottom: 6px;
      }
    }
  }
}
</style>

<style lang="scss">
::v-deep .el-page-header__title {
  font-size: 12px;
}
</style>
